<script lang="ts" setup>

import { onMounted, ref } from 'vue';
import axios from 'axios';

const emp = ref({
    name: '',
    gender: '',
    job: ''
})

const empList = ref([])

const search = async () => {
    const res = await axios.get(`https://web-server.itheima.net/emps/list?name=${emp.value.name}&gender=${emp.value.gender}&job=${emp.value.job}`);
    empList.value = res.data.data;
}
const clear = () => {
    emp.value.name = ''
    emp.value.gender = ''
    emp.value.job = ''
    search()
}

// 钩子函数
onMounted(() => {
    search() // 页面加载完毕，自动触发查询操作
})

const selectable = (row: any, index: number) => {
    // 返回 true 表示该行可选，false 表示不可选
    // 这里可以根据业务逻辑来决定哪些行可选
    return true; // 默认所有行都可选
}

import type { ComponentSize } from 'element-plus'
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

</script>

<template>
    <!-- 搜索栏 -->
    <div class="flex flex-wrap gap-4">
        <el-card shadow="hover">
            <el-form :inline="true" :model="emp" class="demo-form-inline">
                <el-form-item label="姓名">
                    <el-input v-model="emp.name" placeholder="请输入姓名" clearable />
                </el-form-item>

                <el-form-item label="性别">
                    <el-select v-model="emp.gender" placeholder="请选择">
                        <el-option label="男" value="1" />
                        <el-option label="女" value="2" />
                    </el-select>
                </el-form-item>

                <el-form-item label="职位">
                    <el-select v-model="emp.job" placeholder="请选择">
                        <el-option label="班主任" value="1" />
                        <el-option label="讲师" value="2" />
                        <el-option label="学工主管" value="3" />
                        <el-option label="教研主管" value="4" />
                        <el-option label="咨询师" value="5" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="info" @click="clear">清空</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

    <!-- 数据表格 -->
    <el-card shadow="hover" style="margin-top: 20px;">
        <el-button type="warning" class="btn">
            <el-icon>
                <CirclePlus />
            </el-icon>
            <span>新增</span>
        </el-button>
        <el-button type="danger" class="btn" :disabled="true">
            <el-icon>
                <Delete />
            </el-icon>
            <span>批量删除</span>
        </el-button>
        <el-table :data="empList" border style="width: 100%;">

            <!-- 多选框 -->
            <el-table-column type="selection" :selectable="selectable" width="55" align="center" />

            <el-table-column prop="id" label="ID" width="100" align="center" />
            <el-table-column prop="name" label="姓名" width="120" align="center" />

            <el-table-column label="头像" width="120" align="center">
                <template #default="scope">
                    <img :src="scope.row.image" height="40">
                </template>
            </el-table-column>

            <el-table-column prop="gender" label="性别" width="120" align="center">
                <template #default="scope">
                    {{ scope.row.gender == 1 ? '男' : '女' }}
                </template>
            </el-table-column>
            <el-table-column prop="job" label="职位" width="150" align="center">
                <template #default="scope">
                    <span v-if="scope.row.job == 1">班主任</span>
                    <span v-else-if="scope.row.job == 2">讲师</span>
                    <span v-else-if="scope.row.job == 3">学工主管</span>
                    <span v-else-if="scope.row.job == 4">教研主管</span>
                    <span v-else-if="scope.row.job == 5">咨询师</span>
                    <span v-else>其他</span>
                </template>
            </el-table-column>


            <el-table-column prop="entrydate" label="入职日期" width="200" align="center" />
            <el-table-column prop="updatetime" label="更新时间" align="center" />

            <!-- 操作按钮 -->
            <el-table-column label="操作" align="center">
                <el-button type="primary"><el-icon>
                        <Edit />
                    </el-icon><span>编辑</span></el-button>
                <el-button type="danger"><el-icon>
                        <Delete />
                    </el-icon><span>删除</span></el-button>
            </el-table-column>
        </el-table>

        <!-- 分页条 -->
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>

    </el-card>



</template>

<style lang="scss" scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.btn {
    margin-bottom: 10px;
    margin-right: 10px;
}

.demo-pagination-block{
    float: right;
    margin: 50px 10px 10px 10px;
}
</style>